<template>
  <el-row :gutter="24" style="margin:32px 0 0 0;">
    <el-col :span="12">
      <el-card class="grid-card" @click="$emit('showQr')">
        <img src="/png/功能主页.png" class="grid-img" />
        <div class="grid-title">扫码登录</div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="grid-card" @click="$emit('showDanmu')">
        <img src="/png/设置中心.png" class="grid-img" />
        <div class="grid-title">弹幕管理</div>
      </el-card>
    </el-col>
    <el-col :span="12">
  <el-card class="grid-card" @click="$emit('showAiChat')">
        <img src="/png/帮助中心.png" class="grid-img" />
        <div class="grid-title">AI互动</div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="grid-card" @click="$emit('showRoomManager')">
        <img src="/png/直播间管理.png" class="grid-img" />
        <div class="grid-title">直播间管理</div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="grid-card" @click="showMoreFeatureTip">
        <img src="/png/更多功能.png" class="grid-img" />
        <div class="grid-title">更多功能</div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup>
import { ElMessage, ElRow } from 'element-plus'
function showMoreFeatureTip() {
  ElMessage.info('更多功能还在开发中')
}
defineEmits(['showHome', 'showDanmu', 'showAiChat', 'showQr', 'showRoomManager'])
</script>
<style scoped>
  .grid-card {
    border-radius: 36px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    box-shadow: 0 4px 24px #ffe0f7;
    background: #fff6fa;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.15s, filter 0.15s;
  }
  .grid-card:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 32px #ffd6e6;
  }
  .grid-img {
    width: 148px;
    height: 148px;
    border-radius: 32px;
    margin-bottom: 28px;
    box-shadow: 0 8px 32px #ffd6e6;
    background: #fff6fa;
    object-fit: cover;
  }
  .grid-title {
    font-size: 2rem;
    font-weight: bold;
    color: #b48ad6;
    text-align: center;
  }
</style>
